<template>
	<div class="view-my">
		<el-scrollbar>
			<div class="p-[20px]">
				<div class="title">{{ $t('生成设备二维码') }}</div>

				<el-form label-width="100px" :model="form" :disabled="loading" label-position="top">
					<el-form-item :label="$t('设备号')" required>
						<el-input
type="textarea" autosize v-model="form.deviceCode" :placeholder="$t('请输入设备号')"
							clearable />
					</el-form-item>

					<!-- <el-form-item :label="$t('机器号')" required>
						<el-select
							v-model="form.machineNo"
							:placeholder="$t('请输入机器号')"
							:options="machineOptions"
						>
							<el-option
								v-for="(item, index) in machineOptions"
								:key="index"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item> -->

					<el-form-item>
						<el-button type="primary" :disabled="loading" @click="save">{{
							$t('生成二维码')
						}}</el-button>
					</el-form-item>
				</el-form>

				<el-button @click="batchDownload">
					{{ $t('批量下载') }}
				</el-button>

				<el-dialog v-model="dialogTableVisible" title="设备二维码" width="800">
					<div style="display: flex; flex-direction: column; align-items: center">
						<el-image class="qrcode" style="width: 500px; height: 500px" :src="base64" />

						<!-- 保存 二维码 -->
						<el-button style="width: 200px" type="primary" @click="saveImage">保存二维码</el-button>
					</div>
				</el-dialog>

				<el-table :data="base64" style="width: 100%">
					<el-table-column prop="设备号" label="img">
						<template #default="scope">
							{{ scope.row.scene }}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="name" label="Name" width="180" /> -->

					<el-table-column label="二维码" name="img">
						<template #default="scope">

							<el-image style="width: 200px; height: 200px" :src="scope.row.img" fit="fill"></el-image>
						</template>
					</el-table-column>
				</el-table>

			</div>
		</el-scrollbar>

	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'my-info'
});

import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useBase } from '/$/base';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';

/* 机器号选项，A和B */
const machineOptions = ref([
	{ label: 'A', value: 'A' },
	{ label: 'B', value: 'B' }
]);

const { t } = useI18n();
const { service } = useCool();
const { user } = useBase();

// base64
const base64 = ref([]);

// 表单数据
const form = reactive({
	deviceCode: '',
	machineNo: 'A'
});

// 保存状态
const loading = ref(false);

const dialogTableVisible = ref(false);

// 保存
async function save() {
	if (!form.deviceCode) {
		return ElMessage.warning(t('请输入设备号'));
	}

	// 通过换行符拆分
	const arr = form.deviceCode.split('\n');

	loading.value = true;

	base64.value = '';

	const list = [];

	arr?.filter((d) => d)?.forEach((_r) => {
		list.push(`${_r}#A`);
		list.push(`${_r}#B`);
	})

	await service.device.device
		.getQrCode({
			path: 'page/index/index',
			width: 430,
			scene: list
		})
		.then(_res => {
			console.log('_res_res_res', _res);
			base64.value = _res;

			// dialogTableVisible.value = true;
		})
		.catch(err => {
			ElMessage.error(err.message);
		});

	loading.value = false;
}

// 保存图片
function saveImage() {
	if (!base64.value) {
		ElMessage.warning('请先生成二维码');
		return;
	}

	const a = document.createElement('a');
	a.download = 'qrcode.png';
	a.href = base64.value;
	a.click();
	a.remove();
	ElMessage.success('保存成功');
}

onMounted(() => {
	form.deviceCode = '';
});


// 批量下载图片，通过base64下载图片
function batchDownload() {
	if (!base64.value || base64.value.length === 0) {
		ElMessage.warning('暂无二维码可下载');
		return;
	}

	// 遍历所有二维码进行下载
	base64.value.forEach((item, index) => {
		const link = document.createElement('a');
		link.href = item.img;
		// 根据scene生成文件名，例如: device1-A.png
		const scene = item.scene;
		link.download = `二维码-${scene}.png`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	});

	ElMessage.success('二维码批量下载完成');
}

</script>

<style lang="scss">
.view-my {
	background-color: var(--el-bg-color);
	height: 100%;
	box-sizing: border-box;
	border-radius: 6px;

	.el-form {
		width: 400px;
		max-width: 100%;
	}

	.title {
		margin-bottom: 30px;
		font-size: 15px;
		font-weight: bold;
	}
}
</style>
